<template>
  <div class="attendance">
    <!-- <div
      id="myChart"
      style="width: 600px;height:400px;"
    ></div> -->
    <el-form
      :inline="true"
      :model="formInline"
      class="demo-form-inline"
    >
      <el-form-item
        label="姓名"
        class="el-col-4"
      >
        <el-input
          v-model="formInline.uname"
          placeholder="姓名"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="年龄"
        class="el-col-4"
      >
        <el-input
          v-model.number="formInline.uage"
          placeholder="年龄"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="职位"
        class="el-col-4"
      >
        <el-select
          v-model="formInline.uposition"
          placeholder="请选择"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :value="item.label"
            :label="item.label"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="日期"
        class="el-col-4"
      >
        <el-input
          v-model="formInline.date"
          placeholder="日期"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="出勤"
        class="el-col-4"
      >
        <el-select
          v-model="formInline.attendance"
          placeholder="出勤"
        >
          <el-option
            label="是"
            value="是"
          ></el-option>
          <el-option
            label="否"
            value="否"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="onSubmit"
        >添加</el-button>
      </el-form-item>
    </el-form>
    <div class="table">
      <el-table
      v-loading="loading"
        ref="singleTable"
        :data="db.data"
        highlight-current-row
        border
        style="width: 100%"
      >
        <el-table-column
          type="index"
          width="50"
        >
        </el-table-column>
        <template
          v-for="(item,index) in db.hd"
          :key="index"
        >
          <el-table-column
            :property="item.field"
            :label="item.label"
            width="180"
          >
          </el-table-column>
        </template>
        <el-table-column label="操作">
          <template v-slot="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import handleDelete from "../utils/handleDele";
import addTableDate from "../utils/addTableData";

export default {
  props: {},
  data() {
    return {
      loading: true,
      options: [
        {
          value: "选项1",
          label: "会计",
        },
        {
          value: "选项2",
          label: "出纳",
        },
        {
          value: "选项3",
          label: "文员",
        },
        {
          value: "选项4",
          label: "人事",
        },
        {
          value: "选项5",
          label: "网管",
        },
      ],
      formInline: {
        uname: "",
        uage: "",
        uposition: "",
        date: new Date().toLocaleString(),
        attendance: "",
      },
      db: {
        hd: [
          { field: "uname", label: "姓名" },
          { field: "uage", label: "年龄" },
          { field: "uposition", label: "职位" },
          { field: "date", label: "时间" },
          { field: "attendance", label: "是否出勤" },
        ],
        data: [],
      },
    };
  },
  methods: {
    onSubmit() {
      addTableDate.call(
        this,
        this.formInline,
        "checkingAddServlet",
        this.getTableData.bind(this)
      );
    },
    handleEdit(index, row) {
      this.$confirm(
        `
        <label class="el-form-item__label">姓名:</label>
        <input class="el-input__inner" id="uname" value="${row.uname}" placeholder="姓名"/>
        <label class="el-form-item__label">年龄:</label>
        <input class="el-input__inner" id="uage" value="${row.uage}" placeholder="年龄"/>
        <label class="el-form-item__label">职位:</label>
        <input class="el-input__inner" id="uposition" value="${row.uposition}" placeholder="职位"/>
        <label class="el-form-item__label">日期:</label>
        <input class="el-input__inner" id="date" value="${row.date}" placeholder="日期"/>
        <label class="el-form-item__label">是否出勤:</label>
        <input class="el-input__inner" id="attendance" value="${row.attendance}" placeholder="是否出勤"/>
      `,
        "修改文件",
        {
          dangerouslyUseHTMLString: true,
          confirmButtonText: "确定",
          cancelButtonText: "放弃修改",
        }
      )
        .then(() => {
          let uname = document.querySelector("#uname").value;
          let uage = document.querySelector("#uage").value;
          let uposition = document.querySelector("#uposition").value;
          let date = document.querySelector("#date").value;
          let attendance = document.querySelector("#attendance").value;
          fetch("/api/checkingUpdateServlet", {
            method: "post",
            body: `uid=${row.uid}&uname=${uname}&uage=${uage}&uposition=${uposition}&date=${date}&attendance=${attendance}`,
            headers: {
              "Content-Type": "application/x-www-form-urlencoded",
            },
          })
            .then((res) => res.json())
            .then((res) => {
              if (res.status == "0") {
                this.$message({
                  type: "success",
                  message: "修改成功!",
                });
                this.getTableData.call(this);
              } else {
                this.$message.error("服务器繁忙，请稍后再试！");
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已放弃修改",
          });
        });
    },
    handleDelete(index, row) {
      handleDelete.call(
        this,
        "checkingDeleteServlet",
        "uid",
        row,
        this.getTableData.bind(this)
      );
    },
    // drawChart(dbData) {
    //   // 基于准备好的dom，初始化echarts实例【这里存在一个问题，请看到最后】
    //   let myChart = this.$echarts.init(document.getElementById("myChart"));
    //   // 指定图表的配置项和数据
    //   let option = {
    //     title: {
    //       text: "Referer of a Website",
    //       subtext: "Fake Data",
    //       left: "center",
    //     },
    //     tooltip: {
    //       trigger: "item",
    //     },
    //     legend: {
    //       orient: "vertical",
    //       left: "left",
    //     },
    //     series: [
    //       {
    //         name: "Access From",
    //         type: "pie",
    //         radius: "50%",
    //         data: [
    //           { value: 1048, name: "Search Engine" },
    //           { value: 735, name: "Direct" },
    //           { value: 580, name: "Email" },
    //           { value: 484, name: "Union Ads" },
    //           { value: 300, name: "Video Ads" },
    //         ],
    //         emphasis: {
    //           itemStyle: {
    //             shadowBlur: 10,
    //             shadowOffsetX: 0,
    //             shadowColor: "rgba(0, 0, 0, 0.5)",
    //           },
    //         },
    //       },
    //     ],
    //   };
    //  console.log(dbData);
    //   // 使用刚指定的配置项和数据显示图表。
    //   myChart.setOption(option);
    // },
  },
  mounted() {
    // 获取考勤表数据
    function getTableData() {
      this.loading = true
      fetch("/api/checkingSelectServlet", {
        method: "post",
      })
        .then((res) => res.json())
        .then((res) => {
          if (res.status == "0") {
            this.db.data = res.data;
            this.loading = false
          }
          // this.drawChart(res.data);
        });
    }
    getTableData.call(this);
    this.getTableData = getTableData;
  },
};
</script>

<style>
</style>